<template>

    <el-menu class="sidebar" background-color="#2c3e50" text-color="#fff" active-text-color="#409EFF"
        :collapse="isCollapse">
        <!-- <div class="handleCollapse">
            <el-icon size="25" @click="isCollapse = !isCollapse" v-if="isCollapse">
                <Fold />
            </el-icon>
            <el-icon size="25" @click="isCollapse = !isCollapse" v-else>
                <Expand />
            </el-icon>
        </div> -->
        <el-menu-item v-for="item in sidebarList" :key="item.index" :index="item.index" @click="toPage(item.page)">
            <el-icon>
                <component :is="item.icon" />
            </el-icon>
            <template #title>{{ item.title }}</template>
        </el-menu-item>
        <!-- <el-menu-item index="0" @click="toHome">
            <el-icon>
                <House />
            </el-icon>
            <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="1" @click="toEmployeeManagement">
            <el-icon>
                <UserFilled />
            </el-icon>
            <template #title>员工管理</template>
        </el-menu-item>
        <el-menu-item index="2" @click="toEmployeeManagement">
            <el-icon>
                <Flag />
            </el-icon>
            <template #title>考勤管理</template>
        </el-menu-item>
        <el-menu-item index="3" @click="toEmployeeManagement">
            <el-icon>
                <Coin />
            </el-icon><el-icon>< /></el-icon>
            <template #title>薪资管理</template>
        </el-menu-item>
        <el-menu-item index="4" @click="toEmployeeManagement">
            <el-icon>
                <WindPower />
            </el-icon>
            <template #title>假期管理</template>
        </el-menu-item> -->
    </el-menu>

</template>

<script lang="ts" setup>
import { ref } from "vue"
const isCollapse = ref(false)
const sidebarList = ref([
    {
        title: '首页',
        icon: 'House',
        index: '0',
        page: "/"
    },
    {
        title: '员工管理',
        icon: 'UserFilled',
        index: '1',
        page: "/employee"
    },
    {
        title: '考勤管理',
        icon: 'Flag',
        index: '2',
        page: "/attendance"
    },
    {
        title: '薪资管理',
        icon: 'Coin',
        index: '3',
        page: "/payroll"
    },
    {
        title: '假期管理',
        icon: 'WindPower',
        index: '4',
        page: "/leave"
    },
    {
        title: '工作伙伴',
        icon: 'Checked',
        index: '5',
        page: "/workMate"
    }
])

import { useRouter } from "vue-router"
const router = useRouter()
const toPage = (url: string) => {
    router.push(url)
}

</script>

<style scoped lang="scss">
.sidebar {
    width: 250px;
    height: 100vh;
    background-color: #2c3e50;
    color: #fff;
    position: relative;
    transition: all .3s;

    .handleCollapse {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(100%);
        background-color: #2c3e50;
        z-index: 999;
    }
}
</style>